<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas 高清绘制</title>
  <style>
    canvas {
      display: block;
      margin: 10px auto 0;
      border: 1px solid orange;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="600" height="500">您的浏览器当前不支持 canvas</canvas>
</body>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  // window.devicePixelRatio 我打印出来的是1.75
  // 也就是说css中100个像素, 要在175个物理像素展示
  const getPixelRatio = (context) => {
    return window.devicePixelRatio || 1
  }

  /* 解决canvas 在高清屏幕下绘制 出险模糊的问题
    01 放大 canvas 
    02 再在 css 里将宽高设置为原来的大小 
    03 考虑到内容的缩放，因此也需将 ctx 缩放
  */

  const ratio = getPixelRatio()
  const oldWidth = canvas.width
  const oldHeight = canvas.height

  canvas.width = canvas.width * ratio
  canvas.height = canvas.height * ratio

  canvas.style.width = oldWidth + 'px'
  canvas.style.height = oldHeight + 'px'

  ctx.scale(ratio, ratio)


  ctx.beginPath()
  ctx.lineWidth = 10
  ctx.strokeStyle = 'orange'
  ctx.moveTo(100, 100)
  ctx.lineTo(300, 300)
  ctx.lineTo(500, 200)
  ctx.stroke()
  ctx.closePath()

</script>

</html>